<template>
  <!-- 每个小内容 -->
  <div class="index-text">
    <!-- 请求错误页面 -->
    <van-empty
      v-if="!data"
      image="error"
      description="请求错误"
    />
    <!-- 暂无数据页面 -->
    <van-empty
      description="暂无数据"
      v-else-if="!data.length"
    />
    <!-- 有数据显示的页面 -->
    <div
      v-else
      v-for="a in data"
      :key="a.art_id"
      class="content"
      @click="toParticulars(a.art_id)"
    >
      <!-- 如果图片数量为单一 -->
      <div
        v-if="a.cover.type === 1"
        class="only"
      >
        <!-- 单一的左边 -->
        <div class="only-left">
          <div class="only-title">{{ a.title }}</div>
          <div class="left-floor">
            <span>{{ a.aut_name }}</span>
            <span>{{ a.comm_count }}评论</span>
            <span>{{ time(a.pubdate) }}</span>
          </div>
        </div>
        <!-- 单一的右边 -->
        <div class="only-right">
          <img
            :src="a.cover.images[0]"
            class="only-img"
          >
        </div>
      </div>
      <!-- 如果图片数量为多张 -->
      <div v-else>
        <!-- 小内容的标题 -->
        <div class="content-title">{{ a.title }}</div>
        <!-- 小内容的图片 -->
        <div class="content-img">
          <img
            v-for="(p, i) in a.cover.images"
            :key="i"
            :src="p"
            class="more-img"
          >
        </div>
        <!-- 小内容的地板 -->
        <div class="content-floor">
          <span>{{ a.aut_name }}</span>
          <span>{{ a.comm_count }}评论</span>
          <span>{{ time(a.pubdate) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import moment from 'moment';
export default {
  name: 'IndexContent',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    time(t) {
      return moment(t)
        .endOf('day')
        .fromNow();
    },

    toParticulars(id) {
      this.$router.push({
        name: 'article-content',
        params: {
          id,
        }
      })
    }

  },
}
</script>

<style lang="less" scoped>

// 主页内容
.index-text {
      width: 100vw;
      height: calc(100% - 40px);
      overflow: auto;
      padding: 4px 8px;
      box-sizing: border-box;
      // 小内容盒子
      .content {
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #e9e9e9;
        // 当图片为3的每一个小内容盒子
        // 小内容的标题
        .content-title {
          color: #323233;
        }
        // 小内容的图片盒子
        .content-img {
          display: flex;
          width: 100%;
          margin: 8px 0;
          // 图片
          .more-img {
            flex: 1;
            width: 30%;
            height: 73px;
            margin-right: 4px;
            border-radius: 4px;
          }
        }
        // 小内容的地板
        .content-floor {
          font-size: 12px;
          color: #999999;
          margin-bottom: 12px;
          span {
            margin-right: 16px;
          }
        }
        // 当图片为1的没一个小内容盒子
        .only {
          display: flex;
          position: relative;
          .only-left {
            display: inline-block;
            width: 70%;
            .only-title {
              margin-bottom: 50px;
              display: inline-block;
              width: 100%;
              /* 有限的空间才能有溢出的可能 */
              overflow: hidden;
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              margin-top: 4px;
              word-break: break-all;
              line-break: anywhere;
            }
            .left-floor {
              font-size: 12px;
              color: #999999;
              margin-bottom: 12px;
              position: absolute;
              bottom: 4px;
              span {
              margin-right: 16px;
              }
            }
          }
          .only-right {
            flex: 1;
            display: inline-block;
            margin-left: 32px;
            text-align: center;
            margin-top: 8px;
            .only-img {
              width: 110px;
              height: 80px;
              object-fit: cover;
              margin-right: 4px;
              border-radius: 4px;
            }
          }
        }
      }
    }

</style>
